import moment from 'moment';
import { forwardRef, useImperativeHandle, useState } from 'react';
import { connect } from 'umi';
import './index.less';
const Version: React.FC<any> = forwardRef((props: any, ref) => {
  const { setVersionNo, visible } = props;
  const { versions } = props.conversation;
  const [selIndex, setSelIndex] = useState<number>(0);

  useImperativeHandle(ref, () => ({
    initCheck: () => {
      setSelIndex(0);
    },
  }));

  const selVersion = (index: number) => {
    setSelIndex(index);
    const version_no = versions[index].version_no;
    setVersionNo(version_no);
  };

  return (
    <div className="ver-container" style={{ display: visible ? 'flex' : 'none' }}>
      <div className="ver-card-box">
        {versions.map((item: any, index: number) => {
          return (
            <div className="ver-card" key={index} onClick={() => selVersion(index)}>
              {selIndex === index && (
                <div className="card-status">
                  <div className="f9" style={{ marginLeft: '5px' }}>
                    当前
                  </div>
                </div>
              )}
              <div className="card-title">{item.title}</div>
              <div className="card-content f9">{item.abstract}</div>
              <div className="card-time f9">
                {moment(item.version_timestamp).format('YYYY-MM-DD HH:mm:ss')}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
});

// export default Version;
export default connect(({ conversation }) => ({ conversation }), null, null, { forwardRef: true })(
  Version,
);
